<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vuex.min.js"></script>
    <script src="../jquery-3.5.0.min.js"></script>
    <script>
        window.onload=function(){
            //引入辅助函数
            var mapState=Vuex.mapState;
            var mapGetters=Vuex.mapGetters;
            var mapMutations=Vuex.mapMutations;
            var mapActions=Vuex.mapActions;
            //1.实例化
            var store=new Vuex.Store({
                state:{
                    //数据维护/数据初始化，类似data
                    list:[],
                    teachers:[],
                    students:[1,2,3,4,5],
                },
                getters:{
                    //获取器，类似于计算属性
                    list:state=>state.list,
                    students:state=>state.students
                },
                mutations:{
                    //突变，methods->同步函数-》修改state
                    addMemo(state,memo){
                        //追加到list中
                        state.list.push(memo)
                    },//end
                    delMemoHandler(state,id){
                        state.list=state.list.filter(function(item){
                            //filter返回值为满足条件的新数组
                            return item.id!=id
                        })
                    }//end
                },
                actions:{
                    //动作，methods->异步函数
                    getData(context,memo){
                        $.ajax({
                            url:'http://47.106.244.1:8099/manager/category/findAllCategory',
                            success:function(data){
                                console.log(data);
                                //触发突变，修改state
                                context.commit('addMemo',memo)
                            }
                        })
                    }
                }
            });
            //2.注入到vue的根实例对象中
            new Vue({
                el:'#app',
                store,//注入store
                data:{
                    msg:'',
                    index:1,
                    
                },
                computed:{
                    // ...mapState(['list','students'])
                    ...mapGetters(['list','students'])
                },
                methods:{
                    ...mapMutations(['delMemoHandler']),
                    ...mapActions(['getData']),
                    addMemo(){
                        //声明数据格式
                        var memo={
                            id:this.index,
                            msg:this.msg,
                            time:new Date().toLocaleString()
                        }
                        //追加到list中
                        // this.list.push(memo)
                        //1.触发突变，传递memo参数-同步函数
                        // this.$store.commit('addMemo',memo)

                        //2.触发动作，传递memo-异步函数
                        // this.$store.dispatch('getData',memo)
                        this.getData(memo)
                        this.index++;
                        this.msg='';
                    },//end
                    delMemo(id){
                        //触发突变，传递id
                        // this.$store.commit('delMemo',id)
                        this.delMemoHandler(id);
                    }//end
                }
            })

        }
    </script>
</head>
<body>
    <div id="app">
        <h1>备忘录</h1>
        <form action="#" @submit.prevent='addMemo'>
            <input type="text" v-model='msg'>
            <input type="submit" value='保存'>
        </form>
        {{students}}
        <ul>
            <li v-for='item in list'>
                <span>{{item.id}}、</span>
                <span>{{item.msg}}</span>
                <span>{{item.time}}</span>
                <a href="" @click.prevent='delMemo(item.id)'>删除</a>
            </li>
        </ul>
    </div>
</body>
</html>